<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .box ,.demo {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            margin: 50px auto 0;
        }
    </style>
</head>
<body>
    <div class="box"> 未防抖:0 </div>
    <div class="demo"> 已防抖:0 </div>

    <script>
        // 防抖： 是一种防止代码被频繁执行的思想
        // 防抖函数： 是结合延迟函数封装的一个自定义函数 （事件被频繁触发时，会重新执行延迟函数，时间会被重新计算）
        // 参数：1.回调函数，2.时间，3.布尔值
        // 定义函数
        function debounce(callback,times,bool) { // 作用域1
            // 记录延迟函数的变量
            var delay = null;
            // 记录布尔值
            var firstFlag = bool;
            // 返回函数（产生闭包）
            return function() { // 作用域2
                // 判断delay变量是否有值 ，如果有值，说明延迟函数正在执行
                // 事件如果再次触发，就会清除延迟函数，后续会重新开始执行延迟函数
                 if(delay) clearTimeout(delay);
                // 不放形参占位置的时候，有什么方方式获取实参的数据（arguments对象）
                var args = arguments[0];

                // 判断布尔值是否为true , 如果是，首次不需要延迟调用回调函数
                if(firstFlag){
                     // 判断callback是否为函数
                     if(typeof callback == "function") {
                        // 调用函数
                        callback(args);
                    }
                    // 布尔值设置false
                    firstFlag = false;
                }
                // 执行延迟函数
                delay = setTimeout(function(){// 作用域 3
                    // 清除延迟函数
                    clearTimeout(delay);
                    delay = null;
                    // 判断callback是否为函数
                    if(typeof callback == "function"){
                        // 调用函数
                        callback(args);
                    }
                },times);
            }
        }


        // 获取box标签
        var box = document.querySelector(".box");
        var demo = document.querySelector(".demo");
        // 计数器变量
        var count = 0;
        var key = 0;

        // 没有进行防抖处理
        window.addEventListener("resize",function(){
            count ++;
            box.innerHTML = "未防抖:"+count;
        })

        // 有进行防抖处理
        // var fn = debounce(function(){},1000,true); 
        // window.addEventListener("resize",fn);

        // 简写(常规写法)
        //  以后开发中，时间可以设置为300左右
        //  此处此刻不需要用event代替evt
         window.addEventListener("resize",debounce(function(evt){
                key ++;
                demo.innerHTML = "已防抖:"+key;
                console.log(evt);// 事件对象
         },1000,true));


    </script>
</body>
</html>